<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<div class="${(question.questionId == 21 or question.questionId == 22) ? 'box' : 'box_active'}" id="q_${qnId}-${pageId}-${question.questionId}"
	pageId="${pageId}-${seq}" pageInQuestionID="${pageInQuestionId}" uiType="${dynamicFlag}" name="${question.name}">
	<div class="boxActiveTop">
		<div class="boxActiveTopRt">
			<span></span>
		</div>
	</div>
	<div class="boxActiveMid">
		<div class="boxActiveMidRt">
			<h4>
				${question.text}
				<c:if test="${question.helpText != null && question.helpText!=''}">
					<img
						src="<%=request.getContextPath()%>/images/communal/icon_help.gif"
						alt="help" width="14" height="14"
						onclick="Corticon.ShowHelp(this,'${question.questionId}')" />
				</c:if>
			</h4>
			<div class="help"
				style="display: none; position: absolute; z-index: 50;"
				id="help_${question.questionId}">
				<div class="top"></div>
				<div class="mid">
					<div class="midRt">
						<h2>
						</h2>
						<p>
							${question.helpText}
						</p>
					</div>
				</div>
				<div class="bottom"></div>
			</div>

			<div class="question_cont ordinal">
				<c:if test="${uiType == 'Yes/No'}">
					<p class="form_row">
						<input name="answer${qnId}-${pageId}-${question.questionId}"
							id="answer${qnId}-${pageId}-${question.questionId}" type="radio"
							value="Y"
							onclick="Corticon.processResponse(${dialogInstanceId},${qnId},${pageId},${question.questionId},'Y',${pageInQuestionId},'',false)" />
						Yes
						<input name="answer${qnId}-${pageId}-${question.questionId}"
							id="answer${qnId}-${pageId}-${question.questionId}" type="radio"
							value="N"
							onclick="Corticon.processResponse(${dialogInstanceId},${qnId},${pageId},${question.questionId},'N',${pageInQuestionId},'',false)" />
						No
					</p>
				</c:if>

				<c:if test="${uiType == 'No/Yes'}">
					<p class="form_row">
						<input name="answer${qnId}-${pageId}-${question.questionId}"
							id="answer${qnId}-${pageId}-${question.questionId}" type="radio"
							value="N"
							onclick="Corticon.processResponse(${dialogInstanceId},${qnId},${pageId},${question.questionId},'N',${pageInQuestionId},'',false)" />
						No
						<input name="answer${qnId}-${pageId}-${question.questionId}"
							id="answer${qnId}-${pageId}-${question.questionId}" type="radio"
							value="Y"
							onclick="Corticon.processResponse(${dialogInstanceId},${qnId},${pageId},${question.questionId},'Y',${pageInQuestionId},'',false)" />
						Yes
					</p>
				</c:if>

				<c:if test="${uiType == 'US States'}">
					<select
						onchange="Corticon.processResponse(${dialogInstanceId},${qnId},${pageId},${question.questionId},this.options[this.selectedIndex].text,${pageInQuestionId},'',false)"
						id="answer${qnId}-${pageId}-${question.questionId}">
						<c:forEach var="response" items="${question.responses}">
							<option value="${response.value}">
								${response.label}
							</option>
						</c:forEach>
					</select>
				</c:if>

				<c:set var="rt" value="${uiType}" />
				<c:if
					test="${rt == 'Social Security Number' or rt == 'Phone Number' or rt == 'Email Address'}">
					<c:if test="${rt != 'Display'}">
						<input type="text"
							id="answer${qnId}-${pageId}-${question.questionId}"
							onblur="Corticon.greyText('${qnId}-${pageId}-${question.questionId}')" />
					</c:if>
				</c:if>
				<c:if test="${rt == 'Display'}">
					<input type="text"
						id="answer${qnId}-${pageId}-${question.questionId}"
						onblur="Corticon.greyText('${qnId}-${pageId}-${question.questionId}')"
						value="${answerValue}"
						<c:if test="${question.width != ''}">style="width:${question.width}"</c:if>
						readonly="readonly" />
				</c:if>
				<c:if test="${uiType != 'Dropdown'}">
					<p class="form_row">
						<c:forEach var="response" items="${responses}">
							<c:if test="${uiType == 'Radio Button'}">
								<input name="answer${qnId}-${pageId}-${question.questionId}"
									type="radio" value="${response.value}"
									id="answer${qnId}-${pageId}-${question.questionId}"
									onclick="Corticon.processResponse(${dialogInstanceId},${qnId},${pageId},${question.questionId},'${response.value}',${pageInQuestionId},'',false)" />
                                                                    ${response.label} 
                                                                    <br />
							</c:if>

							<c:if test="${uiType == 'Check Box'}">
								<input name="answer${qnId}-${pageId}-${question.questionId}"
									type="checkbox" value="${response.value}"
									id="answer${qnId}-${pageId}-${question.questionId}"
									pageInQuestionID="${pageInQuestionId}"
									onclick="Corticon.processResponse(${dialogInstanceId},${qnId},${pageId},${question.questionId},'${response.value}',${pageInQuestionId},'${response.responseEntryId}',false)"
									responseId="${response.responseEntryId}" />
                                                                    ${response.label}
                                                                    <br />
							</c:if>

						</c:forEach>
					</p>
					<p class="form_row">
						<c:if test="${uiType == 'Text Box'}">
							<input type="text" value=""
								id="answer${qnId}-${pageId}-${question.questionId}"
								onblur="Corticon.greyText('${qnId}-${pageId}-${question.questionId}')" />
						</c:if>

						<c:if test="${uiType == 'Text Area'}">
							<textarea id="answer${qnId}-${pageId}-${question.questionId}"
								onblur="Corticon.greyText('${qnId}-${pageId}-${question.questionId}')"></textarea>
						</c:if>
					</p>

				</c:if>

				<c:if test="${uiType == 'Dropdown'}">
					<select id="answer${qnId}-${pageId}-${question.questionId}"
						onchange="Corticon.processResponse(${dialogInstanceId},${qnId},${pageId},${question.questionId},this.options[this.selectedIndex].text,${pageInQuestionId},'',false)">
						<option value="">
							Please select...
						</option>
						<c:forEach var="response" items="${responses}">
							<option value="${response.value}">
								${response.label}
							</option>
						</c:forEach>
					</select>
				</c:if>
				<p id="errorq_${qnId}-${pageId}-${question.questionId}"
					class="wrong"></p>
			</div>

		</div>
	</div>
	<div class="boxActiveBtm">
		<div class="boxActiveBtmRt">
			<span></span>
		</div>
	</div>
</div>
